<style lang="less">
</style>
<template>
  <section>
    <el-col :span="24">
      <el-button type="text" @click="backClick" style="font-size: 16px">返回上一页</el-button>
    </el-col>
    <el-col :span="24">
      <div style="border: 1px solid #F2F2F2;">
        <el-tabs v-model="activeName" @tab-click="handleClickTab" style="margin: 10px 20px ">
          <!--基本资料-->
          <el-tab-pane label="基本资料" name="first">
            <truck-bellwether-info ref="truckBellwetherInfo"></truck-bellwether-info>
          </el-tab-pane>
          <!--运力池-->
          <el-tab-pane label="运力池" name="second">
            <truck-bellwether-driver ref="truckBellwetherDriver"></truck-bellwether-driver>
          </el-tab-pane>
          <!--领头羊线路-->
          <el-tab-pane label="领头羊线路" name="third">
            <truck-bellwether-line ref="truckBellwetherLine" @isRefresh="isRefresh"></truck-bellwether-line>
          </el-tab-pane>
          <!--辐射范围-->
          <el-tab-pane label="辐射范围" name="four">
            <truck-bellwether-scope ref="truckBellwetherScope"></truck-bellwether-scope>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </section>
</template>

<script>
import TruckBellwetherInfo from './TruckBellwetherInfo.vue';
import TruckBellwetherDriver from './TruckBellwetherDriver.vue';
import TruckBellwetherLine from './TruckBellwetherLine.vue';
import TruckBellwetherScope from './TruckBellwetherScope.vue';

export default {
  components: {
    TruckBellwetherInfo,
    TruckBellwetherDriver,
    TruckBellwetherLine,
    TruckBellwetherScope
  },
  data () {
    return {
      activeName: 'first',
      // 基本资料
      truckBellwetherId: this.$route.params.id
    };
  },
  methods: {
    // 返回领头羊列表页
    backClick () {
      this.$router.push('/system/truck-bellwether');
    },
    isRefresh () {
      this.$refs.truckBellwetherScope.searchTableList();
    }
  },
  mounted () {}
};
</script>
